<script lang="ts" setup>
import { type ArticleVO, getArticlePageApi } from '@/request/api/article'
import { ref } from 'vue'
import { getLabelListByClassifyIdApi, initLabelVO, type LabelVO } from '@/request/api/label'
import { type ClassifyVO, getClassifyApi, initClassifyVO } from '@/request/api/classify'
import { initPageVO, type PageDTO, type PageVO, type ResultType } from '@/type/type'
import { useScrollStore } from '@/stores/scroll'

const scrollStore = useScrollStore()

const colors = [
  'rgb(241, 147, 156)',
  'rgb(98, 16, 46)',
  'rgb(254, 204, 17)',
  'rgb(129, 95, 37)',
  'rgb(18, 170, 156)',
  'rgb(99, 187, 208)',
  'rgb(24,159,224)',
  'rgb(97, 100, 159)'
]

const route = useRoute()

// 获取参数
const params = reactive({
  classifyId: 0,
  labelId: 0
})

const label = ref<LabelVO>(initLabelVO())
const getLabel = () => {
  for (let i = 0; i < labelList.value.length; i++) {
    if (params.labelId === labelList.value[i].id) {
      label.value = labelList.value[i]
    }
  }
}

const page = ref<PageDTO>({
  size: 10,
  current: 1,
  param: {
    labelId: 0
  }
})

const article = ref<PageVO<ArticleVO>>(initPageVO())
const getList = (labelId: number) => {
  params.labelId = labelId
  getLabel()
  page.value.param.labelId = params.labelId
  getArticlePageApi(page.value).then((res) => {
    article.value.list.push(...res.data.list)
    article.value.isEmpty = res.data.isEmpty
  })
}

const labelList = ref<LabelVO[]>([])
const getLabelList = (classifyId: number) => {
  getLabelListByClassifyIdApi(classifyId).then((res) => {
    labelList.value = res.data
    getLabel()
  })
}

const classify = ref<ClassifyVO>(initClassifyVO())
const getClassify = (classifyId: number) => {
  getClassifyApi(classifyId).then((res: ResultType<ClassifyVO>) => {
    classify.value = res.data
  })
}

onMounted(() => {
  if (route.params.classifyId && route.params.labelId) {
    params.classifyId = Number(route.params.classifyId)
    params.labelId = Number(route.params.labelId)
    getClassify(params.classifyId)
    getLabelList(params.classifyId)
    getList(params.labelId)
  }
})
</script>

<template>
  <TopImageTemplate>
    <template #title>
      <el-container class="items-center gap-2" direction="vertical">
        <span class="text-4xl max-md:text-2xl flowing-text">{{ label.classifyName }}</span>
        <span>标签数量：{{ labelList.length }}</span>
      </el-container>
    </template>
    <el-container class="inner-box gap-10" direction="vertical">
      <el-container class="flex-wrap justify-center p-5 gap-5">
        <a
          v-for="(p, i) in labelList"
          :key="i"
          :class="
            'border-2 py-3 use-transitions-colors px-4 use-hover-color rounded-full ' +
            (p.id === params.labelId ? 'animate-pulse' : '')
          "
          :style="{ backgroundColor: colors[i % colors.length] }"
          href="javascript:"
          @click="getList(p.id)"
        >
          {{ p.name }}
        </a>
      </el-container>
      <span class="flex px-5 justify-center">简介：{{ label.introduction }}</span>
      <transition name="el-zoom-in-top">
        <el-container class="p-5 auto-column">
          <ArticleBox :data="article.list" />
        </el-container>
      </transition>
      <a
        v-if="!article.isEmpty"
        class="w-fit mx-auto my-5 rounded-full border-2 use-hover-bg use-transitions-colors-short"
        @click="page.current++"
      >
        <span class="flex py-2 px-5">加载更多</span>
      </a>
      <el-empty v-if="article.isEmpty" description="没有更多数据了..." />
    </el-container>
  </TopImageTemplate>
</template>

<style lang="scss"></style>
